[React + Typescript] emotion の Theming 機能を使って複数のTheme切り替えを実装してみた

React + Typescript 製アプリの Theme を独自定義したものに色々切り替えられるようにしてみました。

#React

#TypeScript

2021.04.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

やりたいこと

emotion の ThemeProvider を使って自前で定義した複数の Theme の切り替えを実装してみました。

コードの量が多かったため全体のコードは CodeSandbox で公開しています。

emotion とは

glam, glamor, styled-component, glamorous といった既存のライブラリから影響を受けて作られた CSS in JS ライブラリです。

書き方もstyled-componentによく似ており、styled-component でできることは emotion でも大体できそうという印象を受けました。

新規プロジェクトの作成

React + typescript の雛形を作成します。

npx create-react-app emotion_sample --template typescript

emotion の導入

プロジェクトのルートディレクトリへ移動し、以下のモジュールをインストールします。必要なのは@emotion/reactと@emotion/styledの２つです。

cd emotion_sample
yarn add -D @emotion/react @emotion/styled

Theme を定義する

theme/theme.tsに Theme を複数定義します。

theme/theme.ts

export const pink = {
  fonts: {
    mainFont: "Avenir Next, sans-serif",
    subFont: "Hira Kaku Pro N, sans-serif",
    textFont: "Hiragino Sans",
    numberFont: "Avenir Next, sans-serif",
  },
  colors: {
    mainColor: "#64363C",
    subTextColor: "#8E354A",
    lineColor: "#E6E5E4",
    backgroundColor: "#F8C3CD",
    titleBackgroudColor: "#F8F4F4",
    accentColor: "#EB7A77",
    stageColor: "#CB1B45",
  },
};

export const yellow = {
  fonts: {
    mainFont: "Times New Roman",
    subFont: "Garamond",
    textFont: "Tahoma",
    numberFont: "Times New Roman",
  },
  colors: {
    mainColor: "#5B622E",
    subTextColor: "#8D742A",
    lineColor: "#E6E5E4",
    backgroundColor: "#DCB879",
    titleBackgroudColor: "#EFBB24",
    accentColor: "#212121",
    stageColor: "#90B44B",
  },
};

export const sky = {
  fonts: {
    mainFont: "Impact",
    subFont: "Tahoma, sans-serif",
    textFont: "Impact",
    numberFont: "Impact",
  },
  colors: {
    mainColor: "#6c756b",
    subTextColor: "#8D8D8D",
    lineColor: "#E6E5E4",
    backgroundColor: "#F3F4F5",
    titleBackgroudColor: "#96C5F7",
    accentColor: "#212121",
    stageColor: "#4D565D",
  },
};

emotion Theme の型を Override する

src/下に@typesフォルダを切り、先ほど定義した Theme の型を@types/theme.d.tsファイルに定義して emotion の Theme 型を拡張します。

@types/theme.d.ts

import '@emotion/react'

declare module '@emotion/react' {
  interface Theme {
    fonts: Fonts
    colors: Colors
  }
}

interface Colors {
  mainColor: string
  subTextColor: string
  lineColor: string
  backgroundColor: string
  titleBackgroudColor: string
  accentColor: string
  stageColor: string
}

interface Fonts {
  mainFont: string
  subFont: string
  textFont: string
  numberFont: string
}

これで IDE 上での型補完が有効になります。

ThemeProvider を追加する

Theme を反映するためにApp.tsxにThemeProviderを追加します。

App.tsx

import React from "react";
import {pink} from "./themes/theme";
import {ThemeProvider} from "@emotion/react";

function App() {
  return (
    <ThemeProvider theme={pink}>
      <div className="App">Hoge</div>
    </ThemeProvider>
  );
}

export default App;

Component で要素を参照する

ここまでで Theme の設定が完了したのであとはコンポーネント内で Theme の値を参照してください。

const H1 = styled.h1`
  font-weight: 500;
  font-family: ${theme.fonts.mainFont};
  font-size: 28px;
  text-align: center;
  color: ${theme.colors.accentColor};
  margin-top: 8px;
  margin-bottom: 0;
`;